<template>
	<view id="app">

		<!-- 头部背景 -->
		<view class="top oh plr30 bffae65">
			<!-- 内容 -->
			<view class="wrap df aic mt50">
				<!-- 图片 -->
				<view class="img wh45">
					<image src="/static/clock1.png" mode="aspectFit"></image>
				</view>
				<view class="state ml20 f30 cw">{{wrap.status_text}}</view>
			</view>
		</view>

		<!-- 订单详情 -->
		<view class="address area mt30 mlr30 pt30">
			<!-- 内容 -->
			<view class="rows plr30">
				<!-- 地址 -->
				<view class="site">
					<!-- 用户 -->
					<view class="user df aic c333 f30">
						<view class="name w150 thd">{{wrap.user_addressData.name}}</view>
						<view class="phone">{{wrap.user_addressData.mobile}}</view>
					</view>
					<!-- 年龄 -->
					<view class="info mt20 thd c999 f28">{{wrap.user_addressData.area}}{{wrap.user_addressData.detail}}
					</view>
				</view>
			</view>
			<!-- 条 -->
			<view class="bar mt30">
				<image src="/static/payBar.png" mode="widthFix"></image>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="proDesc area mt30 mlr30 plr25 bw">
			<!-- 商家 -->
			<view class="rows ptb20 f28 bdb1se">
				<view class="col df f1">
					<!-- 商家头像 -->
					<view class="avatar wh40">
						<image :src="wrap.userData.avatar" mode="aspectFill"></image>
					</view>
					<!-- 商家名称 -->
					<view class="txt ml10 c333">{{wrap.userData.nickname}}</view>
				</view>
			</view>

			<!-- 订单信息 -->
			<view class="proInfo df ais ptb35">
				<!-- 商品图片 -->
				<view class="proImg img180">
					<image :src="wrap.goodsData.images[0]" mode="aspectFill" lazy-load></image>
				</view>
				<!-- 商品信息 -->
				<view class="proInfo df dfc dfsb oh ml20 f1">
					<!-- 商品名称 -->
					<view class="title t2hd c333 f32">{{wrap.goodsData.name}}</view>

					<view class="rows f28">
						<view class="num">×{{wrap.num}}</view>
						<!-- 价格 -->
						<view class="price">
							<text class="c999">小计：</text>
							<text class="cFF9646">￥{{wrap.total}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 总价 -->
			<view class="letter ptb20 tar f28 bdt1sE">
				<text class="c999">总价：</text>
				<text class="cff9646">￥{{wrap.total}}</text>
			</view>
		</view>

		<!-- 订单切换 -->
		<view class="orderDesc area mt30 mlr30 ptb30 plr30 c333 f28">
			<!-- 订单编号 -->
			<view class="rows">
				<view class="col w150">订单编号：</view>
				<view class="col f1">{{wrap.number}}</view>
			</view>

			<!-- 下单时间 -->
			<view class="rows">
				<view class="col w150">下单时间：</view>
				<view class="col f1">{{wrap.createtime}}</view>
			</view>

			<!-- 订单备注 -->
			<view class="rows">
				<view class="col w150">订单备注：</view>
				<view class="col f1">{{wrap.remark ? wrap.remark : ''}}</view>
			</view>

			<!-- 取消时间 -->
			<view class="rows" v-if="wrap.canceltime">
				<view class="col">取消时间：</view>
				<view class="col f1">{{wrap.canceltime}}</view>
			</view>
		</view>

		<!-- 订单其他详情 -->
		<view class="orderDesc area mt30 mlr30 ptb30 plr30 c333 f28" v-if="wrap.paytime">
			<!-- 付款时间 -->
			<view class="rows">
				<view class="col w150">付款时间：</view>
				<view class="col f1">{{wrap.paytime}}</view>
			</view>

			<!-- 发货时间 -->
			<view class="rows" v-if="wrap.express_time">
				<view class="col">发货时间：</view>
				<view class="col f1">{{wrap.express_time}}</view>
			</view>

			<!-- 快递公司 -->
			<view class="rows" v-if="wrap.express_name">
				<view class="col">快递公司：</view>
				<view class="col f1">{{wrap.express_name}}</view>
			</view>

			<!-- 快递单号 -->
			<view class="rows" v-if="wrap.express_number">
				<view class="col">快递单号：</view>
				<view class="col f1">{{wrap.express_number}}</view>
			</view>

			<!-- 收货时间 -->
			<view class="rows" v-if="wrap.shou_time">
				<view class="col">收货时间：</view>
				<view class="col f1">{{wrap.shou_time}}</view>
			</view>

			<!-- 退款时间 -->
			<view class="rows" v-if="wrap.refundtotime && (wrap.status == 5 || wrap.status == 6)">
				<view class="col">退款时间：</view>
				<view class="col f1">{{wrap.refundtotime}}</view>
			</view>

			<!-- 退款理由 -->
			<view class="rows" v-if="wrap.refundtotime && (wrap.status == 5 || wrap.status == 6)">
				<view class="col">退款理由：</view>
				<view class="col f1">{{wrap.refund_reason}}</view>
			</view>

			<!-- 商家处理结果 -->
			<view class="rows" v-if="wrap.shop_refund_status == 4">
				<view class="col">商家处理结果：</view>
				<view class="col f1">拒绝退款</view>
			</view>

			<!-- 商家处理结果 -->
			<view class="rows" v-if="wrap.shop_refund_status == 3">
				<view class="col">商家处理结果：</view>
				<view class="col f1">同意退款</view>
			</view>

			<!-- 商家拒绝原因 -->
			<view class="rows" v-if="wrap.shop_refund_status != 1 && wrap.shop_refund_reason">
				<view class="col">商家拒绝原因：</view>
				<view class="col f1">{{wrap.shop_refund_reason}}</view>
			</view>

			<!-- 商家处理时间 -->
			<view class="rows" v-if="wrap.refundtime">
				<view class="col">商家处理时间：</view>
				<view class="col f1">{{wrap.refundtime}}</view>
			</view>

			<!-- 平台处理结果 -->
			<view class="rows" v-if="wrap.ping_refund_status != 1 && wrap.ping_refund_reason">
				<view class="col">平台处理结果：</view>
				<view class="col f1">{{wrap.ping_refund_reason}}</view>
			</view>

			<!-- 平台处理通过 -->
			<view class="rows" v-if="wrap.ping_refund_status == 3">
				<view class="col">平台处理结果：</view>
				<view class="col f1">同意退款</view>
			</view>

			<!-- 平台处理时间 -->
			<view class="rows" v-if="wrap.refund2time">
				<view class="col">平台处理时间：</view>
				<view class="col f1">{{wrap.refund2time}}</view>
			</view>

			<!-- 退款金额 -->
			<view class="rows" v-if="wrap.status == 6">
				<view class="col">退款金额：</view>
				<view class="col f1">￥{{wrap.payment}}</view>
			</view>

			<!-- 退款完成时间 -->
			<view class="rows" v-if="wrap.shop_refund_status == 3 || wrap.ping_refund_status == 3">
				<view class="col">退款完成时间：</view>
				<view class="col f1">
					<text v-if="wrap.ping_refund_status == 3">{{wrap.refund2time}}</text>
					<text v-else-if="wrap.shop_refund_status == 3">{{wrap.refundtime}}</text>
				</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill"></view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 2">
			<view class="btn prmary ml20 w200" @click="send">发货</view>
			<!-- <navigator hover-class="none" :url="'/pages/my/shop/setorder?type=1&id=' + wrap.id"
				class="btn prmary ml20 w200"></navigator> -->
		</view>

		<!-- 底部 -->
		<view class="footer df dfr ptb20 plr30 bw" v-if="wrap.status == 5 && wrap.shop_refund_status == 2">
			<navigator hover-class="none" :url="'/pages/my/shop/setorder?type=2&id=' + wrap.id" class="btn cancel ml20 w200">拒绝退款</navigator>
			<view class="btn prmary ml20 w200" @click="confirm">同意退款</view>
		</view>


	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 内容
				wrap: {},
				// 订单id
				id: '',
				// 退款理由
				backVal: '',
				// 提交成功
				success: false,
				// 商家id
				selluser: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 订单id
			e.id ? that.id = e.id : '';

			// 用户
			e.selluser ? that.selluser = e.selluser : '';
		},

		// 加载
		onShow() {
			// 订单详情
			that.order_detail();
		},

		// 方法集
		methods: {
			// 订单详情
			order_detail() {
				// 请求接口 
				that.request({
					url: '',
					// 上传数据
					data: {
						table: 'goods_order',
						// 商家id
						selluser: that.selluser,
						// 订单id
						id: that.id,
					},
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值内容
							that.wrap = rs.data;

							// 更改标题
							uni.setNavigationBarTitle({
								title: that.wrap.status_text,
							})
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 发货
			send() {
				// 判断当前是发货还是自提
				if (that.wrap.goodsData.express == '自提') {
					// 订单数据
					var data = {
						// id
						id: that.wrap.id,
						// 订单数据
						status: 3,
						// 发货时间
						express_time: Date.parse(new Date()) / 1000,
					}

					// 改变订单状态
					that.util.changeOrder({
						data: data,
						success(rs) {
							// 弹窗提示
							that.alert('操作成功');
						}
					}, that)
				} else {
					// 跳转页面
					uni.navigateTo({
						url: '/pages/my/shop/setorder?type=1&id=' + that.wrap.id,
					})
				}
			},

			// 确定
			confirm() {
				// 弹窗提示
				that.alert({
					value: '确认同意退款',
					success(rs) {
						// 点击确定
						if (rs.confirm) {
							// 改变订单状态
							that.util.changeOrder({
								data: {
									// 订单id
									id: that.id,
									// 订单状态
									status: 6,
									// 商家反馈
									shop_refund_status: 3,
									// 商家处理时间
									refundtime: Date.parse(new Date()) / 1000,
								},
							}, that)
						}
					}
				});
			},
		},
	};
</script>
<style>
	/* 上背景 */
	.top {
		height: 200rpx;
	}

	/* 商品简息 */
	.address {
		margin-top: -50rpx;
	}

	/* 订单简介 */
	.orderDesc {
		line-height: 70rpx;
	}

	/* 每行第一列 */
	.rows .col:nth-child(1) {
		color: #999;
	}
</style>
